import React, { useState, useEffect } from 'react'
import { Button, Card, Input ,Select} from 'antd'
import { SearchForm } from 'components';
import { GetManagementList } from './service'
const RemoteControl = () => {

  const [list, setList] = useState([])


  const BtnList = [
    "入场授权",
    "出场授权",
    "松手牌",
    "单个缩锁舌",
    "单个开锁",
    "单个重启",
  ]



  useEffect(() => {
    getDataSource()
  }, [])

  const getDataSource = async () => {
   GetManagementList().then(res => {
      console.log(res)
      const str = res.data
        .map(item => {
          return { value: item.area_name, label: item.area_name }
        })
      setList(str)
    })
  }

  return (
    <div>
      <Card>

        {BtnList.map((item, index) => (
          <Button key={index} type='primary' style={{ margin: "10px" }}>
            {item}
          </Button>
        ))}

      </Card>

      <br />
      <Card>
        <SearchForm>
          <SearchForm.Item span={5} title="物理区">
            <Select
              options={list}
              placeholder="请选择分区"
              allowClear
              onChange={(value) => { }}
            />
          </SearchForm.Item>
          <SearchForm.Item span={5} title="开始柜号">
            <Input placeholder="请输入开始柜号" />
          </SearchForm.Item>
          <SearchForm.Item span={5} title="结束柜号">
             <Input placeholder="请输入结束柜号" />
          </SearchForm.Item>
        </SearchForm>
        <Button type='primary' style={{ margin: "10px" }}>
          批量开锁
        </Button>

      </Card>
    </div>
  )
}

export default RemoteControl